<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-08-16 11:38:39
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-21 16:13:35
 * @version: 1.2.5
 * @Description: 
-->
<script setup lang="ts">
import { props } from '../props';
import type { FormInstance } from 'element-plus';
const { data, customClass, labelWidth, clearable, ruleForm, FormItems, formSize, labelPosition } = defineProps(props);
const formRef = ref<FormInstance>();
const resetForm = () => {
    if (!formRef.value) return;
    formRef.value.resetFields();
};
const validateForm = async () => {
    if (!formRef.value) return;
    return await formRef.value.validate((valid: any) => {
        return valid;
    });
};

defineExpose({
    resetForm,
    validateForm
});


const handleInput = (value: any) => {
    // 正则表达式，匹配纯中文字符
    const regex = /^[\u4e00-\u9fa5]+$/;
    console.log(regex.test(value));
    if (regex.test(value)) {
        return '';
    }
};
</script>
<template>
    <el-form ref="formRef" :rules="ruleForm" :model="data" :label-width="labelWidth" :label-position="labelPosition"
        :customClass="customClass" :size="formSize">
        <el-row :gutter="50">
            <el-col v-for="item in FormItems" :span="item.span">
                <!-- input -->
                <el-form-item v-if="item.mode == 'input'" :label="item.label" :prop="item.prop" :rules="item.rules">
                    <el-input v-model="data[item.prop]" :placeholder="item.placeholder" :clearable="clearable"
                        @input="handleInput($event)" :style="{ width: item.width }" />
                </el-form-item>
                <!-- textarea -->
                <el-form-item v-if="item.mode == 'textarea'" :label="item.label" :prop="item.prop" :rules="item.rules">
                    <el-input v-model="data[item.prop]" :type="item.mode" :placeholder="item.placeholder"
                        :clearable="clearable" :maxlength="item.maxlength" show-word-limit :rows="item.rows"
                        :style="{ width: item.width }" />
                </el-form-item>
                <!-- select -->
                <el-form-item v-if="item.mode == 'select'" :label="item.label" :prop="item.prop" :rules="item.rules">
                    <el-select-v2 v-model="data[item.prop]" :options="item.options" :placeholder="item.placeholder"
                        :clearable="clearable" :style="{ width: item.width }" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
